<template>
  <div class="app-container">
    <el-form :model="queryParams" :inline="true">
      <el-form-item prop="title" :label="$t('query.deviceImei')">
        <el-autocomplete v-model.trim="queryParams.deviceId"
                         :placeholder="$t('query.placeholder.deviceImei')"
                         class="inline-input"
                         :fetch-suggestions="queryDevice"
                         :trigger-on-focus="false"
                         style="width: 350px;"
                         :maxlength="80"
                         size="small">
        </el-autocomplete>
      </el-form-item>

      <el-form-item :label="$t('query.dateRange')">
        <el-date-picker
          v-model="dateRange"
          size="small"
          type="datetimerange"
          range-separator="-"
          :start-placeholder="$t('query.placeholder.dateRange.start')"
          :end-placeholder="$t('query.placeholder.dateRange.end')"
          :clearable="false"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" v-hasPermi="['data:battery:query']" v-loading="loading" @click="handleQuery">
          {{this.$t('query.search')}}
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          v-hasPermi="['data:battery:export']"
          @click="handleExport"
        >{{this.$t('query.export')}}
        </el-button>
      </el-form-item>
    </el-form>

    <el-tabs v-model="activeName" @tab-click="handleClick">

      <!-- 车身&电池 高频数据 -->
      <el-tab-pane :label="$t('query.battery.bodyBatteryHighName')" name="first">
        <el-table border v-loading="loading" :data="faultCodeList" ref="table" :empty-text="$t('query.noData')">
          <el-table-column :label="$t('query.deviceCode')" align="center" prop="deviceId" width="250"></el-table-column>
          <el-table-column :label="$t('query.recordTime')" align="center" prop="recordTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.recordTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('query.deviceTime')" align="center" prop="deviceTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.deviceTime) }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="frontTireTemp" width="180">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.bodyBatteryHigh.frontTireTemp')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          content="单位℃">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="backTireTemp" width="180">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.bodyBatteryHigh.backTireTemp')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          :content="$t('query.battery.bodyBatteryHigh.unitC')">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="frontTirePressure" width="180">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.bodyBatteryHigh.frontTirePressure')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          :content="$t('query.battery.bodyBatteryHigh.unitKPa')">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="backTirePressure" width="180">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.bodyBatteryHigh.backTirePressure')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          :content="$t('query.battery.bodyBatteryHigh.unitKPa')">
              <i class="el-icon-question" />
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column :label="$t('query.battery.bodyBatteryHigh.hSoc')" align="center" prop="hSoc" width="110">
            <template slot-scope="scope">
              <span>{{parseInt(scope.row.hSoc) != 0 ? scope.row.hSoc : 0}}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('query.battery.bodyBatteryHigh.hSoh')" align="center" prop="hSoh" width="110">
            <template slot-scope="scope">
              <span>{{parseInt(scope.row.hSoh) > 100 ? 0:scope.row.hSoh}}</span>
            </template></el-table-column>
          <el-table-column :label="$t('query.battery.bodyBatteryHigh.lSoc')" align="center" prop="lSoc" width="110">
            <template slot-scope="scope">
              <span>{{parseInt(scope.row.lSoc) != 0 ? scope.row.lSoc : 0}}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('query.battery.bodyBatteryHigh.lSoh')" align="center" prop="lSoh" width="110">
            <template slot-scope="scope">
              <span>{{parseInt(scope.row.lSoh) > 100 ? 0:scope.row.lSoh }}</span>
            </template>
          </el-table-column>

          <el-table-column :label="$t('query.battery.bodyBatteryHigh.hBatteryVoltage')" align="center" prop="hBatteryVoltage" width="120">
            <template slot-scope="scope">
              <span>{{parseInt(scope.row.hBatteryVoltage) > 720 ? 0:scope.row.hBatteryVoltage }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('query.battery.bodyBatteryHigh.lBatteryVoltage')" align="center" prop="lBatteryVoltage" width="120">
            <template slot-scope="scope">
              <span>{{parseInt(scope.row.lBatteryVoltage) > 720 ? 0:scope.row.lBatteryVoltage }}</span>
            </template>
          </el-table-column>

          <el-table-column :label="$t('query.battery.bodyBatteryHigh.fullTimeChargePack1')" align="center" prop="fullTimeChargePack1" width="200">
            <template slot-scope="scope">
              <span >{{scope.row.fullTimeChargePack1 > 720 ? 0:scope.row.fullTimeChargePack1 + "min"}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="hChargeStatus" width="180">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.bodyBatteryHigh.hChargeStatus')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          :content="$t('query.battery.bodyBatteryHigh.hChargeStatusUnit')">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <template slot-scope="scope">
               <span v-for="dict in dict.type.charging_phase" v-if="dict.value == scope.row.hChargeStatus">{{dict.label}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="hChargeEndStatus" width="180">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.bodyBatteryHigh.hChargeEndStatus')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          :content="$t('query.battery.bodyBatteryHigh.hChargeEndStatusUnit')">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <template slot-scope="scope">
               <span v-for="dict in dict.type.end_of_charge_status" v-if="dict.value == scope.row.hChargeEndStatus">{{dict.label}}</span>
            </template>
          </el-table-column>

          <el-table-column :label="$t('query.battery.bodyBatteryHigh.fullTimeChargePack2')" align="center" prop="fullTimeChargePack2" width="200">
            <template slot-scope="scope">
              <span >{{scope.row.fullTimeChargePack2 > 720 ? 0:scope.row.fullTimeChargePack2 + "min"}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="lChargeStatus" width="180">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.bodyBatteryHigh.lChargeStatus')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          :content="$t('query.battery.bodyBatteryHigh.lChargeStatusUnit')">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <template slot-scope="scope">
               <span v-for="dict in dict.type.charging_phase" v-if="dict.value == scope.row.lChargeStatus">{{dict.label}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="lChargeEndStatus" width="180">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.bodyBatteryHigh.lChargeEndStatus')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          :content="$t('query.battery.bodyBatteryHigh.lChargeEndStatusUnit')">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <template slot-scope="scope">
               <span v-for="dict in dict.type.end_of_charge_status" v-if="dict.value == scope.row.lChargeEndStatus">{{dict.label}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="hBatteryWorkStatus" width="180">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.bodyBatteryHigh.hBatteryWorkStatus')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          :content="$t('query.battery.bodyBatteryHigh.hBatteryWorkStatusUnit')">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <template slot-scope="scope">
               <span v-for="dict in dict.type.battery_working_status" v-if="dict.value == scope.row.hBatteryWorkStatus">{{dict.label}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="lBatteryWorkStatus" width="180">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.bodyBatteryHigh.lBatteryWorkStatus')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          :content="$t('query.battery.bodyBatteryHigh.lBatteryWorkStatusUnit')">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
            <template slot-scope="scope">
               <span v-for="dict in dict.type.battery_working_status" v-if="dict.value == scope.row.lBatteryWorkStatus">{{dict.label}}</span>
            </template>
          </el-table-column>
        </el-table>

        <el-row type="flex" justify="end">
          <el-col :span="3.5">
            <el-button-group>
              <el-button type="cyan" icon="el-icon-arrow-left" size="mini" :disabled="faultCodePageItems.length === 0"
                         @click="handlePrev">{{this.$t('query.prePage')}}
              </el-button>
              <el-button type="cyan" size="mini" :disabled="faultCodeList.length < 10" @click="handleNext">
                {{this.$t('query.nextPage')}}<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
          </el-col>
        </el-row>
      </el-tab-pane>

      <!-- L电池 低频数据 -->
      <el-tab-pane :label="$t('query.battery.lBatteryLowName')" name="second">
        <el-table border v-loading="loading" :data="highFrequencyDataList" ref="table" :empty-text="$t('query.noData')">
          <el-table-column :label="$t('query.deviceCode')" align="center" prop="deviceId" width="250"></el-table-column>
          <el-table-column :label="$t('query.recordTime')" align="center" prop="recordTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.recordTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('query.deviceTime')" align="center" prop="deviceTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.deviceTime) }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="dischargePortDischargeMosStatus" width="180">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.batteryLowHigh.dischargePortDischargeMosStatus')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          content="0:ON 1:OFF">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.dischargePortChargeMosStatus')" align="center" prop="dischargePortChargeMosStatus" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.chargePortDischargeMosStatus')" align="center" prop="chargePortDischargeMosStatus" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.chargePortChargeMosStatus')" align="center" prop="chargePortChargeMosStatus" width="180"></el-table-column>

          <el-table-column :label="$t('query.battery.batteryLowHigh.preMosStatus')" align="center" prop="preMosStatus" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.parallelPackageFaults')" align="center" prop="parallelPackageFaults" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.packCurrent')" align="center" prop="packCurrent" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.energyFeedbackCmd')" align="center" prop="energyFeedbackCmd" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.underVoltageBattery')" align="center" prop="underVoltageBattery" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.maximumDischargeTime')" align="center" prop="maximumDischargeTime" width="220"></el-table-column>

          <el-table-column :label="$t('query.battery.batteryLowHigh.longDischargeTime')" align="center" prop="longDischargeTime" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.longChargeTime')" align="center" prop="longChargeTime" width="180"></el-table-column>
          <el-table-column align="center" prop="otaMode" width="180">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.batteryLowHigh.otaMode')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          :content="$t('query.battery.batteryLowHigh.otaModeContent')">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.packMaxChargeVoltage')" align="center" prop="packMaxChargeVoltage" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.packMaxChargeCurrent')" align="center" prop="packMaxChargeCurrent" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.packMinChargeTemp')" align="center" prop="packMinChargeTemp" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.packMaxChargeTemp')" align="center" prop="packMaxChargeTemp" width="180"></el-table-column>

          <el-table-column align="center" prop="chargeInfoCheck" width="160">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.batteryLowHigh.chargeInfoCheck')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          :content="$t('query.battery.batteryLowHigh.chargeInfoCheckContent')">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.coreMaxTemp')" align="center" prop="coreMaxTemp" width="160"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.coreMinTemp')" align="center" prop="coreMinTemp" width="160"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.packEvnTemp')" align="center" prop="packEvnTemp" width="160"></el-table-column>

          <el-table-column :label="$t('query.battery.batteryLowHigh.dischargeMosChargeTemp')" align="center" prop="dischargeMosChargeTemp" width="200"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.dischargeMosDischargeTemp')" align="center" prop="dischargeMosDischargeTemp" width="200"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.chargeMosChargeTemp')" align="center" prop="chargeMosChargeTemp" width="200"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.chargeMosDischargeTemp')" align="center" prop="chargeMosDischargeTemp" width="200"></el-table-column>

          <el-table-column :label="$t('query.battery.batteryLowHigh.preMosTemp')" align="center" prop="preMosTemp" width="200"></el-table-column>
        </el-table>

        <el-row type="flex" justify="end">
          <el-col :span="3.5">
            <el-button-group>
              <el-button type="cyan" icon="el-icon-arrow-left" size="mini" :disabled="highFrequencyPageItems.length === 0"
                         @click="handlePrev"
              >{{$t('query.prePage')}}
              </el-button>
              <el-button type="cyan" size="mini" :disabled="highFrequencyDataList.length < 10" @click="handleNext">
                {{$t('query.nextPage')}}<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
          </el-col>
        </el-row>
      </el-tab-pane>

      <!-- H电池 低频数据 -->
      <el-tab-pane :label="$t('query.battery.hBatteryLowName')" name="third">
        <el-table border v-loading="loading" :data="lowFrequencyDataList" ref="table" :empty-text="$t('query.noData')">
          <el-table-column :label="$t('query.deviceCode')" align="center" prop="deviceId" width="250"></el-table-column>
          <el-table-column :label="$t('query.recordTime')" align="center" prop="recordTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.recordTime) }}</span>
            </template>
          </el-table-column>
          <el-table-cloumn :label="$t('query.deviceTime')" align="center" prop="deviceTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.deviceTime) }}</span>
            </template>
          </el-table-cloumn>

          <el-table-column align="center" prop="dischargePortDischargeMosStatus" width="180">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.batteryLowHigh.dischargePortDischargeMosStatus')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          content="0:ON 1:OFF">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.dischargePortChargeMosStatus')" align="center" prop="dischargePortChargeMosStatus" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.chargePortDischargeMosStatus')" align="center" prop="chargePortDischargeMosStatus" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.chargePortChargeMosStatus')" align="center" prop="chargePortChargeMosStatus" width="180"></el-table-column>

          <el-table-column :label="$t('query.battery.batteryLowHigh.preMosStatus')" align="center" prop="preMosStatus" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.parallelPackageFaults')" align="center" prop="parallelPackageFaults" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.packCurrent')" align="center" prop="packCurrent" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.energyFeedbackCmd')" align="center" prop="energyFeedbackCmd" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.underVoltageBattery')" align="center" prop="underVoltageBattery" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.maximumDischargeTime')" align="center" prop="maximumDischargeTime" width="220"></el-table-column>

          <el-table-column :label="$t('query.battery.batteryLowHigh.longDischargeTime')" align="center" prop="longDischargeTime" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.longChargeTime')" align="center" prop="longChargeTime" width="180"></el-table-column>
          <el-table-column align="center" prop="otaMode" width="180">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.batteryLowHigh.otaMode')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          :content="$t('query.battery.batteryLowHigh.otaModeContent')">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.packMaxChargeVoltage')" align="center" prop="packMaxChargeVoltage" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.packMaxChargeCurrent')" align="center" prop="packMaxChargeCurrent" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.packMinChargeTemp')" align="center" prop="packMinChargeTemp" width="180"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.packMaxChargeTemp')" align="center" prop="packMaxChargeTemp" width="180"></el-table-column>

          <el-table-column align="center" prop="chargeInfoCheck" width="160">
            <template slot-scope="scope" slot="header">
              {{$t('query.battery.batteryLowHigh.chargeInfoCheck')}}
              <el-tooltip class="item" effect="dark" placement="top-start"
                          :content="$t('query.battery.batteryLowHigh.chargeInfoCheckContent')">
                <i class="el-icon-question" />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.coreMaxTemp')" align="center" prop="coreMaxTemp" width="160"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.coreMinTemp')" align="center" prop="coreMinTemp" width="160"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.packEvnTemp')" align="center" prop="packEvnTemp" width="160"></el-table-column>

          <el-table-column :label="$t('query.battery.batteryLowHigh.dischargeMosChargeTemp')" align="center" prop="dischargeMosChargeTemp" width="200"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.dischargeMosDischargeTemp')" align="center" prop="dischargeMosDischargeTemp" width="200"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.chargeMosChargeTemp')" align="center" prop="chargeMosChargeTemp" width="200"></el-table-column>
          <el-table-column :label="$t('query.battery.batteryLowHigh.chargeMosDischargeTemp')" align="center" prop="chargeMosDischargeTemp" width="200"></el-table-column>

          <el-table-column :label="$t('query.battery.batteryLowHigh.preMosTemp')" align="center" prop="preMosTemp" width="200"></el-table-column>
        </el-table>

        <el-row type="flex" justify="end">
          <el-col :span="3.5">
            <el-button-group>
              <el-button type="cyan" icon="el-icon-arrow-left" size="mini" :disabled="lowFrequencyPageItems.length === 0"
                         @click="handlePrev">
                {{this.$t('query.prePage')}}
              </el-button>
              <el-button type="cyan" size="mini" :disabled="lowFrequencyDataList.length < 10" @click="handleNext">
                {{this.$t('query.nextPage')}}<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
          </el-col>
        </el-row>
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
import {queryDeviceIdAsync} from '@/api/query/device';
import { battery } from '@/api/query/data'
import {getToken} from '@/utils/auth'

export default {
  name: 'index',
  dicts: ['charging_phase','end_of_charge_status','battery_working_status'],
  data() {
    return {
      queryParams: {
        table: "",
        deviceId: null,
        types: [],
        from: new Date(),
        to: new Date()
      },
      dateRange: [new Date(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date(new Date().getTime() + 3600 * 1000 * 24)],
      loading: false,
      source: null,

      activeName: 'first',

      faultCodeList: [],
      faultCodePageItems: [],

      highFrequencyDataList: [],
      highFrequencyPageItems: [],

      lowFrequencyDataList: [],
      lowFrequencyPageItems: [],

    }
  },


  methods: {
    queryDevice(suffix, cb) {
      let form = {deviceId: suffix, source: this.source}
      queryDeviceIdAsync(form, cb);
    },

    handleQuery() {
      if (!this.validInput()) {
        return;
      }
      this.loading = true;

      this.queryParams.from = this.dateRange[0].getTime();
      this.queryParams.to = this.dateRange[1].getTime();

      this.faultCodePageItems = [];
      this.highFrequencyPageItems = [];
      this.lowFrequencyPageItems = [];
      this.loading = true;

      switch (this.activeName) {
        case 'first':
          this.queryParams.type = 1;
          break;
        case 'second':
          this.queryParams.type = 2;
          break;
        case 'third':
          this.queryParams.type = 3;
          break;
      }

      this.getList();
    },

    getList() {
      battery(this.queryParams).then(rsp => {
        switch (this.activeName) {
          case 'first':
            this.faultCodeList = rsp.data;
            break;
          case 'second':
            this.highFrequencyDataList = rsp.data;
            break;
          case 'third':
            this.lowFrequencyDataList = rsp.data;
            break;
        }
        this.loading = false;
      });
    },

    handleNext() {
      if (!this.validInput()) {
        return;
      }
      this.loading = true;

      switch (this.activeName) {
        case 'first':
          this.queryParams.type = 1;
          this.faultCodePageItems.push(this.faultCodeList[0].deviceTime)
          this.queryParams.to = this.faultCodeList[this.faultCodeList.length - 1].deviceTime - 1
          break;
        case 'second':
          this.queryParams.type = 2;
          this.highFrequencyPageItems.push(this.highFrequencyDataList[0].deviceTime)
          this.queryParams.to = this.highFrequencyDataList[this.highFrequencyDataList.length - 1].deviceTime - 1
          break;
        case 'third':
          this.queryParams.type = 3;
          this.lowFrequencyPageItems.push(this.lowFrequencyDataList[0].deviceTime)
          this.queryParams.to = this.lowFrequencyDataList[this.lowFrequencyDataList.length - 1].deviceTime - 1
          break;
      }
      this.getList();
    },

    handlePrev() {
      if (!this.validInput()) {
        return;
      }
      this.loading = true;

      switch (this.activeName) {
        case 'first':
          this.queryParams.type = 1;
          this.queryParams.to = this.faultCodePageItems.pop();
          break;
        case 'second':
          this.queryParams.type = 2;
          this.queryParams.to = this.highFrequencyPageItems.pop();
          break;
        case 'third':
          this.queryParams.type = 3;
          this.queryParams.to = this.lowFrequencyPageItems.pop();
          break;
      }
      this.getList();
    },

    handleClick() {

    },

    handleExport() {
      if (!this.validInput()) {
        return;
      }

      switch (this.activeName) {
        case 'first':
          this.queryParams.type = 1;
          break;
        case 'second':
          this.queryParams.type = 2;
          break;
        case 'third':
          this.queryParams.type = 3;
          break;
      }

      let table = this.$refs.table;
      let cols = table.$children.filter(it => {
        return it.prop !== null && it.prop !== undefined && it.label !== null && it.label !== undefined;
      });

      let props = cols.map(it => {
        return it.prop;
      }).join(",");

      let labels = cols.map(it => {
        return it.label;
      }).join(",")

      let path = "/query/data/battery/export";

      const params = {
        table: this.queryParams.table,
        deviceId: this.queryParams.deviceId,
        type: this.queryParams.type,
        from: this.dateRange[0].getTime(),
        to: this.dateRange[1].getTime(),
        Authorization: 'Bearer ' + getToken(),
        props: props,
        labels: labels
      }

      const baseURL = process.env.VUE_APP_BASE_API
      const qs = Object.keys(params)
        .map(key => `${key}=${params[key]}`)
        .join('&');

      window.location.href = baseURL + path + "?" + qs;
    },

    validInput() {
      if (this.queryParams.deviceId === "" || this.queryParams.deviceId === undefined
        || this.queryParams.deviceId === null) {
        this.$message({
          showClose: true,
          duration: 1000,
          message: this.$t('query.battery.inputDeviceNumber'),
          type: 'warning'
        });
        return false;
      }
      if (this.dateRange.length !== 2) {
        this.$message({
          showClose: true,
          duration: 1000,
          message: this.$t('query.battery.selectTimeRange'),
          type: 'warning'
        });
        return false;
      }
      return true;
    },

  }
}
</script>

<style scoped>

</style>
